<script setup>
import { onMounted, ref } from 'vue'
import TopHeader from '@/views/edu/common/TopHeader.vue'
import { useTokenStore } from '@/stores/token.js'
import { getAllTasks, getTasksByName } from '@/api/task'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router' // 导入 useRouter 钩子

const router = useRouter() // 获取路由实例

// 定义搜索关键字
const keywords = ref('')
// 根据关键字搜索
const searchKeyWord = async () => {
  let result = await getTasksByName(keywords.value)
  taskList.value = result.data
}

const goToTaskDetail = taskId => {
  router.push({ name: 'allDescription', params: { taskId } }) // 跳转到AllDescription.vue对应的路由，并传递taskId参数
}
const taskList = ref([])
onMounted(async () => {
  try {
    const response = await getAllTasks()
    if (response && response.data) {
      taskList.value = response.data
      console.log(taskList.value)
    } else {
      taskList.value = []
    }
  } catch (error) {
    console.error('获取任务列表出现错误:', error)
    ElMessage.error('获取任务列表失败')
  }
})
const tokenStore = useTokenStore()
const imgList = ref([
  '/src/img/yinju1.png',
  '/src/img/yinju.png',
  '/src/img/yinju2.png',
  '/src/img/yinju3.png'
])
const featureList = ref([
  {
    name: '多元课程',
    description:
      '突出平台涵盖丰富多样的课程资源，满足不同学习需求和兴趣方向，体现课程管理板块下课程内容的丰富性与多元性。'
  },
  {
    name: '作业交互',
    description:
      '涵盖了上传作业以及后续围绕作业展开的相关互动环节，既强调学生能便捷提交作业，又体现了平台在作业这一教学环节的交互功能，比如老师评分、大家评论交流等。'
  },
  {
    name: '实时评论',
    description:
      '着重体现平台上评论交流功能的及时性，让师生之间、学生之间能够随时针对课程、作业等方面展开讨论互动，营造活跃的学习氛围。'
  },
  {
    name: '精准评分',
    description:
      '体现评分功能的专业性与准确性，教师通过平台可以依据明确的标准对学生作业等进行合理、精准的评价，助力教学质量提升。'
  }
])
const featureList1 = ref([])

const clickFeature = index => {
  // 根据点击的索引，将对应的描述信息对象添加到featureList1中
  featureList1.value = [featureList.value[index]]
}

// 用于控制显示哪个宣传语对应的大卡片，初始为0，即显示第一条宣传语对应的卡片
const showFeatureIndex = ref(0)
tokenStore.setToken(sessionStorage.getItem('token'))
</script>

<template>
  <!--顶部 start-->
  <TopHeader />
  <!--顶部 end-->
  <!--搜索 组件 start-->
  <div style="height: auto">
    <el-form>
      <div class="input-search">
        <div class="search-room">
          <el-input
            class="el-input"
            placeholder="搜索你需要的课程"
            v-model="keywords"
          ></el-input>
          <el-button
            @click="searchKeyWord"
            color="#5e6eba"
            class="hotel-btn"
            icon="Search"
            size="large"
          ></el-button>
        </div>
      </div>
    </el-form>
  </div>
  <!--搜索 组件 end-->
  <!--技能提升 start-->
  <div class="bg000">
    <div class="edu-container edu-new-good-course">
      <!--技能提升标题 start-->
      <div class="edu-course-title">
        <div class="edu-course-title-left">
          <div class="text">
            <div class="text-top">WELCOM</div>
            <div class="text-bottom"></div>
          </div>
        </div>
      </div>
      <el-carousel
        :interval="4000"
        type="card"
        height="200px"
        style="margin-bottom: 40px"
      >
        <!-- 使用v-for遍历图片数组 -->
        <el-carousel-item v-for="(imgSrc, index) in imgList" :key="index">
          <!-- 使用img标签来展示图片，设置src属性为对应的图片路径 -->
          <img
            :src="imgSrc"
            alt="图片"
            style="width: 100%; height: 100%; object-fit: cover"
          />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!--技能提升 end-->
  </div>
  <div class="feature-container">
    <div class="feature-left">
      <el-card
        v-for="(feature, index) in featureList"
        :key="index"
        class="feature-card"
        :body-style="{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center'
        }"
        @click="clickFeature(index)"
      >
        <span>{{ feature.name }}</span>
      </el-card>
    </div>
    <div class="feature-right">
      <div v-if="featureList1.length === 0">
        <div class="feature-detail-card">
          <div style="height: 450px; margin-left: 20px">
            <el-image
              style="
                width: 80%;
                height: 75%;
                margin-top: 20px;
                margin-left: 30px;
              "
              src="/src/img/R-C.gif"
              preview-src-list="/src/img/yinju.png"
            />
          </div>
        </div>
      </div>
      <el-card
        v-for="(feature, index) in featureList1"
        :key="index"
        class="feature-detail-card"
        v-show="showFeatureIndex === index"
        :body-style="{ padding: '20px' }"
      >
        <div
          style="
            height: 400px;
            margin-left: 20px;
            font-size: 24px;
            font-family: 幼圆, serif;
          "
        >
          <el-image
            style="
              width: 80%;
              height: 75%;
              margin-bottom: 20px;
              margin-left: 30px;
            "
            src="/src/img/R-C.gif"
            preview-src-list="/src/img/yinju.png"
          >
          </el-image>
          <div style="background: rgba(0, 0, 0, 0.5); color: white">
            {{ feature.description }}
          </div>
        </div>
      </el-card>
    </div>
  </div>
  <div class="feature-container">
    <div class="edu-course-title">
      <div class="edu-course-title-left">
        <div class="text">
          <div class="text-top">课程安排</div>
          <div class="text-bottom"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="feature-container" style="width: 100%; margin-left: 50px">
    <div v-if="taskList && taskList.length > 0">
      <el-space wrap>
        <el-card
          v-for="(task, index) in taskList"
          :key="index"
          class="box-card"
          style="width: 30%; margin-bottom: 20px"
          wrap="true"
        >
          <template #header>
            <div class="card-header">
              <span style="font-size: 20px; font-weight: bold">{{
                task.taskName
              }}</span>
            </div>
          </template>
          <div class="text item" style="text-align: center">
            <div class="mb-4">
              <el-button @click="goToTaskDetail(task.taskId)"
                >查看详情</el-button
              >
            </div>
          </div>
          <div>
            截止时间：
            {{ task.dueDate }}
          </div>
        </el-card>
      </el-space>
    </div>
    <div v-else style="font-size: 80px" class="no-courses">
      未查询到相关课程
    </div>
  </div>
  <div class="feature-container">
    <el-footer>管理平台 ©2024 Created by seventeen</el-footer>
  </div>
</template>

<style scoped>
*,
:after,
:before {
  box-sizing: inherit;
}

.edu-container {
  width: 1200px;
}

.edu-banner-item span {
  color: #ede4e4;
  font-size: 14px;
  display: block;
  text-align: left;
  cursor: pointer;
}

.edu-banner-item span img {
  cursor: pointer;
  float: right;
  margin-top: 5px;
}

.edu-banner-nav h3 {
  color: #343434;
  font-size: 23px;
  position: relative;
  padding-left: 40px;
  border-bottom: 1px solid #e2e2e2;
}

.banner-list-img img {
  width: 100%;
  height: 100%;
  border-radius: 6px;
}

.bottom-type .type-left img {
  width: 100%;
  height: 100%;
}

.edu-new-good-course {
  margin: 30px auto -30px auto;
}

.edu-course-title {
  display: flex;
  padding-top: 10px;
}

.edu-course-title-left {
  display: flex;
}
.edu-course-title .text {
  position: relative;
  height: 38px;
  z-index: 50;
}

.edu-course-title .text .text-top {
  font-size: 24px;
  padding: 0 5px;
  color: #333333;
  line-height: 31px;
  font-weight: 700;
}

.edu-course-title .text .text-bottom {
  position: absolute;
  top: 25px;
  left: 0;
  width: 100%;
  height: 13px;
  background: linear-gradient(90deg, #fbf84f 0%, #fea935 100%);
  border-radius: 7px;
  z-index: -1;
}

.edu-course-list-item-li .list-img img {
  width: 100%;
  height: 100%;
}

.list-tag span {
  color: #999;
  margin-left: 10px;
}

.list-tag i {
  float: right;
  font-style: normal;
}

.bg000 {
  box-shadow: 0 2px 4px 0 rgb(7 17 27 / 6%);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.feature-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: 20px;
  background-color: #f5f5f5;
}

.feature-left {
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

.feature-card {
  width: 150px;
  height: 80px;
  border: 6px solid;
  border-image: linear-gradient(to left, #f5f5f5, #c98f96, #5681e4) 1;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.3s;
  padding-top: 20px;
  font-size: 24px;
  font-family: 幼圆, 微软雅黑, sans-serif;
  background-color: #f5f5f5;
}

.feature-card:hover {
  transform: translateY(-5px);
}

.feature-right {
  margin-top: 20px;
  margin-left: 50px;
  width: 800px;
  border: 6px solid;
  border-image: linear-gradient(to right, #f5f5f5, #c98f96, #5681e4) 1;
}

.feature-detail-card {
  display: none;
  background-color: #f4f4f5;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
}

.feature-detail-card {
  display: block;
}
.input-search {
  width: 100%;
  padding: 30px 0 10px;
  text-align: center;
  background-color: #fff;
}
.input-search .el-input {
  vertical-align: middle;
  width: 500px;
  height: 40px;
  background: #d9dfe0;
  border: none;
  outline: none;
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}

.no-courses {
  font-family: '幼圆', sans-serif;
  font-size: 80px;
  font-weight: 700;
  color: #333;
  text-align: center;
  margin-top: 50px;
}
</style>
